<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="(col_item, index) in cols"
        :prop="col_item"
        :label="col_item"
        :key="index"
      >
      </el-table-column>
          <el-table-column fixed="right" label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="medium"
          >审核</el-button
        >
      </template>
    </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :total="total_count"
        @current-change="page_change"
        :current-page.sync="cur_page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: ["cols", "rule_id", "topic"],

  data() {
    return {
      tableData: [],
      total_count: 100,
      cur_page: 1,
    };
  },

  methods: {
    page_change(num) {
      console.log("page change" + num);
      var cur_cols = this.cols;
      var cur_topic = this.topic;
      var cur_id = this.rule_id;
      console.log(cur_topic);
      console.log(cur_cols);
      this.$axios({
        url: "http://" + this.$config.server_ip + ":5004/get_rule_table",
        method: "get",
        params: { id: cur_id, cols: "" + cur_cols, topic: cur_topic , page: num},
      }).then((res) => {
        console.log(res.data);
        this.tableData = res.data["results"];
      });
    },
  },

  watch: {
    rule_id(new_id) {
      var cur_cols = this.cols;
      var cur_topic = this.topic;
      this.cur_page = 1;
      console.log(cur_topic);
      console.log(cur_cols);
      this.$axios({
        url: "http://" + this.$config.server_ip + ":5004/get_rule_table",
        method: "get",
        params: { id: new_id, cols: "" + cur_cols, topic: cur_topic , page: 1},
      }).then((res) => {
        console.log(res.data);
        this.tableData = res.data["results"];
        this.total_count = res.data["total"];
      });
    },
  },

  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>

<style>
</style>
